<!-- Logo & Brand -->
<div id="logo">
  <img src="images/afas-logo.png" alt="AFAS Home" class="logo-image">
</div>

<!-- Main Navigation -->
<div id="side_nav">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div id="main_navigation">
          <ul class="nav nav-list nav-stacked">

            <li>
              <a href="" ng-click="openCourse = !openCourse"><b>COURSE</b></a>
              <ul collapse="openCourse" class="nav nav-list nav-stacked">
                <li ng-class="{active: $state.includes('coursetypes')}"><a ui-sref="coursetypes.list">Course Types</a></li>
                <li ng-class="{active: $state.includes('terms.list')}"><a ui-sref="terms.list">Terms</a></li>
                <li ng-class="{active: $state.includes('dayclasses')}"><a ui-sref="dayclasses.list">Day Classes</a></li>
                <li ng-class="{active: $state.includes('timeclasses')}"><a ui-sref="timeclasses.list">Time Classes</a></li>
                <li ng-class="{active: $state.includes('courses.list')}"><a ui-sref="courses.list">Course Level + Subject</a></li>
                <li ng-class="{active: $state.includes('courses.fee')}"><a ui-sref="courses.fee">Courses Fee</a></li>
                <li ng-class="{active: $state.includes('teachers.list')}"><a ui-sref="teachers.list">Teachers</a></li>
                <li ng-class="{active: $state.includes('rooms')}"><a ui-sref="rooms.list">Classroom</a></li>
                <li ng-class="{active: $state.includes('courseSchedules')}"><a ui-sref="courseSchedules.list">Course Schedules</a></li>
                <li ng-class="{active: $state.includes('classes')}"><a ui-sref="classes.list">Class List</a></li>
              </ul>
            </li>

            <li>
              <a href="" ng-click="openRegistration = !openRegistration"><b>REGISTRATION</b></a>
              <ul collapse="openRegistration" class="nav nav-list nav-stacked">
                <li ng-class="{active: $state.includes('students.list')}"><a ui-sref="students.list">Students</a></li>
                <li ng-class="{active: $state.includes('pt.list')}"><a ui-sref="pt.list">Placement Test</a></li>
                <li ng-class="{active: $state.includes('mt.list')}"><a ui-sref="mt.list">Make-up Test</a></li>
              </ul>
            </li>

            <li>
              <a href="" ng-click="openPayment = !openPayment"><b>PAYMENT</b></a>
              <ul collapse="openPayment" class="nav nav-list nav-stacked">
                <li ng-class="{active: $state.includes('students.refund')}"><a ui-sref="students.refund">Refunds</a></li>
                <li ng-class="{active: $state.includes('invoices.list')}"><a ui-sref="invoices.list">Unpaid Item</a></li>
                <li ng-class="{active: $state.includes('payments.list')}"><a ui-sref="payments.list">Invoice + Receipt</a></li>
                <li ng-class="{active: $state.includes('student_discounts.list')}"><a ui-sref="student_discounts.list">Discount + Voucher</a></li>
                <li ng-class="{active: $state.includes('discount_types.list')}"><a ui-sref="discount_types.list">Discount Types</a></li>
                <li ng-class="{active: $state.includes('banktransferrecords.list')}"><a ui-sref="banktransferrecords.list">Bank Transfer</a></li>
                <li ng-class="{active: $state.includes('creditcardtransactionrecords.list')}"><a ui-sref="creditcardtransactionrecords.list">Credit Card Transaction</a></li>
                <li ng-class="{active: $state.includes('creditcardtypes.list')}"><a ui-sref="creditcardtypes.list">Credit Card Type + Fee</a></li>
                <li ng-class="{active: $state.includes('clients.list')}"><a ui-sref="clients.list">IALF Client</a></li>
              </ul>
            </li>

            <li>
              <a href="" ng-click="openInventory = !openInventory"><b>INVENTORY</b></a>
              <ul collapse="openInventory" class="nav nav-list nav-stacked">
                <li ng-class="{active: $state.includes('product.list')}"><a ui-sref="products.list">Product</a></li>
                <li ng-class="{active: $state.includes('productcategories.list')}"><a ui-sref="productcategories.list">Product Category</a></li>
                <li ng-class="{active: $state.includes('stocks.list')}"><a ui-sref="stocks.list">Stock</a></li>
                <li ng-class="{active: $state.includes('stocks.order')}"><a ui-sref="stocks.order">Stock Orders</a></li>
                <li ng-class="{active: $state.includes('stocks.order')}"><a ui-sref="stocks.order">Product Distribution</a></li>
                <li ng-class="{active: $state.includes('inventories.list')}"><a ui-sref="inventories.list">Inventories</a></li>
                <li ng-class="{active: $state.includes('suppliers.list')}"><a ui-sref="suppliers.list">Suppliers</a></li>
              </ul>
            </li>

            <li>
              <a href="" ng-click="openReport = !openReport"><b>REPORT</b></a>
              <ul collapse="openReport" class="nav nav-list nav-stacked">
                <li ng-class="{active: $state.includes('reports.fo_pt')}"><a ui-sref="reports.fo_pt">FO: PT Report</a></li>
                <li ng-class="{active: $state.includes('reports.term_target')}"><a ui-sref="reports.term_target">GE: Term Target</a></li>
                <li ng-class="{active: $state.includes('reports.ge_class')}"><a ui-sref="reports.ge_class">GE: Class Report</a></li>
                <li ng-class="{active: $state.includes('reports.ge_student')}"><a ui-sref="reports.ge_student">GE: Student List Report</a></li>
                <li ng-class="{active: $state.includes('reports.cashier_daily')}"><a ui-sref="reports.cashier_daily">Cashier: Daily Sales</a></li>
                <li ng-class="{active: $state.includes('reports.finance_refund')}"><a ui-sref="reports.finance_refund">Finance: Refund Settlement</a></li>
                <li ng-class="{active: $state.includes('reports.finance_fee')}"><a ui-sref="reports.finance_fee">Finance: Course Fee Class</a></li>
                <li ng-class="{active: $state.includes('reports.finance_summary')}"><a ui-sref="reports.finance_summary">Finance: Summary Course</a></li>
                <li ng-class="{active: $state.includes('reports.finance_income')}"><a ui-sref="reports.finance_income">Finance: Income</a></li>
                <li ng-class="{active: $state.includes('reports.finance_payment')}"><a ui-sref="reports.finance_payment">Finance: Student Payment</a></li>
              </ul>
            </li>

            <li>
              <a href="" ng-click="openAdmin = !openAdmin"><b>ADMIN</b></a>
              <ul collapse="openAdmin" class="nav nav-list nav-stacked">
                <li ng-class="{active: $state.includes('refundtypes')}"><a ui-sref="refundtypes.list">Refund Types</a></li>
                <li ng-class="{active: $state.includes('mt.fee')}"><a ui-sref="mt.fee">Make-up Test Fee</a></li>
                <li ng-class="{active: $state.includes('contacttypes')}"><a ui-sref="contacttypes.list">Contact Types</a></li>
                <li ng-class="{active: $state.includes('countries')}"><a ui-sref="countries.list">Countries</a></li>
                <li ng-class="{active: $state.includes('provinces')}"><a ui-sref="provinces.list">Provinces</a></li>
                <li ng-class="{active: $state.includes('cities')}"><a ui-sref="cities.list">Cities</a></li>
                <li ng-class="{active: $state.includes('roleprofiles')}"><a ui-sref="roleprofiles.list">User Role Profiles</a></li>
                <li ng-class="{active: $state.includes('pt.fee')}"><a ui-sref="pt.fee">Placement Test Fee</a></li>
                <li ng-class="{active: $state.includes('currencies')}"><a ui-sref="currencies.list">Currencies</a></li>
                <li ng-class="{active: $state.includes('staffs.list')}"><a ui-sref="staffs.list">Staff</a></li>
                <li ng-class="{active: $state.includes('users.list')}"><a ui-sref="users.list">Users</a></li>
                <li ng-class="{active: $state.includes('role_profiles.list')}"><a ui-sref="role_profiles.list">User Roles</a></li>
              </ul>
            </li>

          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Settings -->
<div id="account_navigation">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <ul class="nav nav-list nav-stacked">
          <li><a href="#">My Profile</a></li>
          <li><a href="#">My Settings</a></li>
          <li><a href ng-click="logMeOut()">Logout</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>